﻿@model GoodsModel

<link rel="stylesheet" href="/css/element.css">

<script>
    layui.use(['index', 'jquery','upload', 'formSelects'], function () {
            var $ = layui.$
                , form = layui.form
                , multiSelect = layui.multiSelect
                ,active = {}

            var formSelects = layui.formSelects;
            formSelects.value('CategoryIds', @Newtonsoft.Json.JsonConvert.SerializeObject(Model.CategoryIds));


            form.on('switch(IsShipEnabled)', function (data) {
                if (data.elem.checked) {
                    $('#isFreeShipping').show();
                } else {
                    $('#isFreeShipping').hide();
                } //开关是否开启，true或者false
            });

            form.on('switch(ManageStockEnabled)', function (data) {
                if (data.elem.checked) {
                    $('#stockqty').show();
                } else {
                    $('#stockqty').hide();
                } //开关是否开启，true或者false
            });
             var isclick = true;
             form.on('submit(set_system_submit_btn)', function (obj) {
                if (isclick) {
                    isclick = false;
                    var index = layer.load(2, { shade: false });
                    var field = obj.field; //获取提交的字段
                    field.FullDescription = ue.getContent();
                    field.CategoryIds = formSelects.value('CategoryIds', 'val');
                    //layer.msg(JSON.stringify(obj.field));
                    //提交 Ajax 成功后，关闭当前弹层并重载表格
                    $.post('@Url.Action("Edit")', field, function (rep) {
                        if (rep.success == 1) {
                            $('#@Html.IdFor(model=>model.Id)').val(rep.goodsId);
                            layer.msg('保存成功', function () {
                                setTimeout(function () {
                                    layer.close(index);
                                    isclick = true;
                                }, 1000);
                            });
                        }
                    });
                }
                return false;
            });
            $('.layui-btn.layuiadmin-btn-tags').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

        });

       layui.use(['jquery', 'layer'], function () {
            var $ = layui.$
            , layer = layui.layer;
       });
</script>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-form" wid100 lay-filter="">
                        <input asp-for="Id" type="hidden" />
                        <input asp-for="Published" type="hidden" />
                        <div class="layui-form-item">
                            <label class="layui-form-label">编号</label>
                            <div class="layui-form-mid layui-word-aux">
                                @Model.Id
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <u-label asp-for="Name" />
                            <div class="layui-input-inline" style="width:50%;">
                                <u-editor asp-for="Name" />
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <u-label asp-for="ShortDescription" />
                            <div class="layui-input-inline" style="width:50%;">
                                <u-editor asp-for="ShortDescription" />
                            </div>
                        </div>
                        <div id="app">
                            <div class="layui-form-item">
                                <label class="layui-form-label">商品图片</label>
                                <div class="layui-input-block">
                                    <div class="filelist-css" v-for="(item,index) in fileList" :key="index">
                                        <div class="filelist-img el-upload-list--picture-card">
                                            <img class="el-upload-list__item-thumbnail"
                                                 :src="item.imageUrl" alt="">
                                            <span class="el-upload-list__item-actions">
                                                <span class="el-upload-list__item-left"
                                                      v-on:click="handeleleft(index)">
                                                    <i class="el-icon-arrow-left"></i>
                                                </span>
                                                <span class="el-upload-list__item-preview"
                                                      v-on:click="handlePictureCardPreview(item,index)">
                                                    <i class="el-icon-zoom-in"></i>
                                                </span>
                                                <span class="el-upload-list__item-delete"
                                                      v-on:click="handleRemove(index)">
                                                    <i class="el-icon-delete"></i>
                                                </span>
                                                <span class="el-upload-list__item-right"
                                                      v-on:click="handleright(index)">
                                                    <i class="el-icon-arrow-right"></i>
                                                </span>
                                            </span>
                                        </div>
                                    </div>
                                    <el-upload v-if="fileList.length<5"
                                               style="display:inline-block;vertical-align:top;"
                                               action="/admin/picture/AsyncUpload"
                                               :on-success="uploadSuccess"
                                               list-type="picture-card"
                                               multiple
                                               :show-file-list="false"
                                               :limit="5">
                                        <i slot="default" class="el-icon-plus"></i>
                                    </el-upload>
                                    <el-dialog :visible.sync="dialogVisible">
                                        <img width="100%" :src="dialogImageUrl" alt="">
                                    </el-dialog>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <u-label asp-for="CategoryIds" />
                                <div class="layui-input-inline" style="width:50%;">
                                    <select name="CategoryIds" xm-select="CategoryIds" xm-select-search="@Url.Action("Search","Goods",new { goodsId=Model.Id})">
                                        @foreach (var cate in Model.AvailableCategories)
                                        {
                                            <option value="@cate.Value" selected="selected">@cate.Text</option>
                                        }
                                    </select>
                                    <span asp-validation-for="CategoryIds"></span>
                                </div>
                                <div class="layui-form-mid layui-word-aux">
                                    （可多选）
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <u-label asp-for="BrandId" />
                                <div class="layui-input-inline">
                                    <u-select asp-for="BrandId" asp-items="@Model.AvailableBrands" />
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <u-label asp-for="Sku" />
                                <div class="layui-input-inline">
                                    <u-editor asp-for="Sku" />
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <u-label asp-for="ManufacturerPartNumber" />
                                <div class="layui-input-inline">
                                    <u-editor asp-for="ManufacturerPartNumber" />
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <u-label asp-for="Price" />
                                <div class="layui-input-inline">
                                    <u-editor asp-for="Price" />
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <u-label asp-for="OldPrice" />
                                <div class="layui-input-inline">
                                    <u-editor asp-for="OldPrice" />
                                </div>
                            </div>
                            <div class="layui-form-item" style="display:none;">
                                <u-label asp-for="ProductCost" />
                                <div class="layui-input-inline">
                                    <u-editor asp-for="ProductCost" />
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <u-label asp-for="ManageStockEnabled" />
                                <div class="layui-input-inline">
                                    <u-bool asp-for="ManageStockEnabled" />
                                </div>
                            </div>
                            <div class="layui-form-item" id="stockqty" style="display:@(Model.ManageStockEnabled?"block":"none");">
                                <u-label asp-for="StockQuantity" />
                                <div class="layui-input-inline">
                                    <u-editor asp-for="StockQuantity" />
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <u-label asp-for="IsShipEnabled" />
                                <div class="layui-input-inline">
                                    <u-bool asp-for="IsShipEnabled" />
                                </div>
                            </div>
                            <div class="layui-form-item" id="isFreeShipping" style="display:@(Model.IsShipEnabled?"block":"none");">
                                <u-label asp-for="IsFreeShipping" />
                                <div class="layui-input-inline">
                                    <u-bool asp-for="IsFreeShipping" />
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <u-label asp-for="Weight" />
                                <div class="layui-input-inline">
                                    <u-editor asp-for="Weight" />
                                </div>
                            </div>
                            <div class="layui-form-item" style="display:none">
                                <u-label asp-for="Length" />
                                <div class="layui-input-inline">
                                    <u-editor asp-for="Length" />
                                </div>
                            </div>
                            <div class="layui-form-item" style="display:none">
                                <u-label asp-for="Width" />
                                <div class="layui-input-inline">
                                    <u-editor asp-for="Width" />
                                </div>
                            </div>
                            <div class="layui-form-item" style="display:none">
                                <u-label asp-for="Height" />
                                <div class="layui-input-inline">
                                    <u-editor asp-for="Height" />
                                </div>
                            </div>
                            <input id="attr" type="hidden" name="attr" :value="attr" />
                            <input id="imgs" type="hidden" name="imgs" :value="imgs" />
                            <input id="attrtable" type="hidden" name="attrtable" :value="attrtable" />
                            <input id="canshu" type="hidden" name="canshu" :value="canshu" />
                            <div class="layui-form-item">
                                <label class="layui-form-label">商品规格</label>
                                <div class="layui-input-block" id="specif" v-if="attrListArr.length">
                                    <div class="specific-main" v-for="(item,index) in attrListArr" :key="index">
                                        <img class="specific-close" src="~/images/close.png" v-on:click="closeAttr(index)">
                                        <div class="specific-list">
                                            <span>规格名(如: 颜色):</span>
                                            <div class="specific-input">
                                                <el-select v-model="attrListArr[index].name" allow-create default-first-option filterable placeholder="请选择" v-on:change="changeAttr(attrListArr[index].name, index)">
                                                    <el-option v-for="item in attrListArr[index].options"
                                                               :key="item.Id"
                                                               :label="item.Name"
                                                               :value="item.Name">
                                                    </el-option>
                                                </el-select>
                                            </div>
                                        </div>
                                        <div class="specific-list">
                                            <span>规格值(如: 红色):</span>
                                            <div class="specific-input" style="width: 100px;" v-for="(cate,indx) in attrListArr[index].attrValArr" :key="indx">
                                                <img class="specific-val-close" src="~/images/close.png" v-on:click="closeValue(index,indx)">
                                                <el-select v-model="cate.name" allow-create default-first-option filterable placeholder="请选择" v-on:change="changeValue(cate.name,index,indx)">
                                                    <el-option v-for="j in cate.attrValOptions"
                                                               :key="j.Id"
                                                               :label="j.Name"
                                                               :value="j.Name">
                                                    </el-option>
                                                </el-select>
                                            </div>
                                            <span class="addspecificval" v-on:click="getattrval(index)">添加规格值</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-input-block" v-if="attrListArr.length <= 2">
                                    <button type="button" class="layui-btn layui-btn-sm layui-btn-primary" v-on:click="addAttr">+ 添加规格</button>
                                </div>
                            </div>
                            <div class="layui-form-item" style="width:80%;">
                                <label class="layui-form-label">规格明细</label>
                                <div class="layui-input-block">
                                    <table class="layui-table" v-if="attrListArr.length || attrInfo.length">
                                        <thead>
                                            <tr>
                                                <th v-for="(item,index) in attrListArr" :key="index">{{item.name}}</th>
                                                <th style="width:20%">现价</th>
                                                <th style="width:15%">SKU</th>
                                                <th style="width:15%">库存</th>
                                                <th style="text-align:center;">操作</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr v-for="(item,index) in attrInfo" :key="index">
                                                <td v-for="(cate,inx) in attrInfo[index].arrs" :key="inx">{{cate.name}}</td>
                                                <td><input type="text" v-model="item.info.price" name="title" required lay-verify="required" autocomplete="off" class="layui-input" v-on:input="attrinfoinputchange"></td>
                                                <td><input type="text" v-model="item.info.sku" name="title" autocomplete="off" class="layui-input" v-on:input="attrinfoinputchange"></td>
                                                <td><input type="text" v-model="item.info.qty" name="title" required lay-verify="required" autocomplete="off" class="layui-input" v-on:input="attrinfoinputchange"></td>
                                                <td><a class="paramsAction" v-on:click="tableRemove(index)">删除</a></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    <p class="batch">批量设置<el-link type="info" :underline="false" v-on:click="showDign(1)">价格</el-link><el-link type="info" :underline="false" v-on:click="showDign(2)">sku</el-link><el-link type="info" :underline="false" v-on:click="showDign(3)">库存</el-link></p>
                                </div>
                                <el-dialog title="批量设置" :visible.sync="dialogFormVisible" width="30%">
                                    <el-form :model="form">
                                        <el-form-item :label="'输入'+ dialogTitle">
                                            <el-input v-model="inputval" autocomplete="off"></el-input>
                                        </el-form-item>
                                    </el-form>
                                    <div slot="footer" class="dialog-footer">
                                        <el-button v-on:click="dialogFormVisible = false">取 消</el-button>
                                        <el-button type="primary" v-on:click="dialogConfirm">确 定</el-button>
                                    </div>
                                </el-dialog>
                            </div>
                            <div class="layui-form-item" style="width:60%;">
                                <label class="layui-form-label">商品参数</label>
                                <div class="layui-input-block">
                                    <table class="layui-table">
                                        <colgroup>
                                            <col>
                                            <col>
                                            <col>
                                        </colgroup>
                                        <thead>
                                            <tr>
                                                <th>名称</th>
                                                <th>描述</th>
                                                <th>操作</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr v-for="(item,index) in attrbutelist" :key="index">
                                                <td>
                                                    <el-select v-model="attrbutelist[index].name" allow-create default-first-option filterable v-on:change="changeattrbute(attrbutelist[index].name,index)" placeholder="请选择">
                                                        <el-option v-for="item in attrbutelist[index].options"
                                                                   :key="item.Id"
                                                                   :label="item.Name"
                                                                   :value="item.Name">
                                                        </el-option>
                                                    </el-select>
                                                </td>
                                                <td>
                                                    <el-select v-model="attrbutelist[index].valname" allow-create default-first-option filterable placeholder="请选择" v-on:change="changeattrbuteval(attrbutelist[index].valname,index)">
                                                        <el-option v-for="item in attrbutelist[index].optionsVal"
                                                                   :key="item.Id"
                                                                   :label="item.Name"
                                                                   :value="item.Name">
                                                        </el-option>
                                                    </el-select>
                                                </td>
                                                <td><a class="paramsAction" v-on:click="removeattrbutelist(index)">删除</a></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    <button type="button" class="layui-btn layui-btn-sm layui-btn-primary" v-on:click="addCans">+ 添加参数</button>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <u-label asp-for="FullDescription" />
                            <div class="layui-input-block" style="width:800px;height:720px">
                                <u-editor asp-for="FullDescription" asp-template="UEditor" style="width:800px;height:620px" />
                                <span asp-validation-for="FullDescription"></span>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button id="submit" class="layui-btn" lay-submit lay-filter="set_system_submit_btn">确认保存</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/js/vue.js"></script>
<script src="/js/element.js"></script>
<script src="/js/axios.min.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            inputval: '',
            dialogTitle: '价格',
            dialogFormVisible: false,
            dialogStatus: 1,
            attrListArr: [],
            attrInfo: [],
            attrbutelist: [],
            dialogImageUrl: '',
            dialogVisible: false,
            fileList: [],
            goodsId: '@Model.Id',
            attr: '@Html.Raw(Model.attr)',
            canshu: '@Html.Raw(Model.canshu)',
            imgs: '@Html.Raw(Model.imgs)',
            attrtable: '@Html.Raw(Model.attrtable)',
            wholesale: [],
            userrole: [],
            form: {},
            attrvalls: []
        },
        methods: {
            editWholesale: function (index) {
                this.wholesale[index].isShow = true
                Vue.set(this.wholesale, index, this.wholesale[index]);
            },
            dialogConfirm: function () {
                var vm = this
                if (this.dialogStatus == 1) {
                    this.attrInfo.map(function (item, index, arr) {
                        item.info.price = vm.inputval;
                        return item;
                    })
                } else if (this.dialogStatus == 2) {
                    this.attrInfo.map(function (item, index, arr) {
                        item.info.sku = vm.inputval;
                        return item;
                    })
                } else if (this.dialogStatus == 3) {
                    this.attrInfo.map(function (item, index, arr) {
                        item.info.qty = vm.inputval;
                        return item;
                    })
                }
                this.dialogFormVisible = false
                this.attrinfoinputchange()
            },
            showDign: function (status) {
                if (status == 1) {
                    this.dialogTitle = '价格'
                } else if (status == 2) {
                    this.dialogTitle = 'SKU'
                } else if (status == 3) {
                    this.dialogTitle = '库存'
                }
                this.dialogStatus = status
                this.dialogFormVisible = true
            },
            handleRemove(index) {
                this.fileList.splice(index, 1)
                this.imgs = JSON.stringify(this.fileList)
            },
            handeleleft(index) {
                if (index == 0) {
                    return
                }
                var temp = this.fileList[index]
                Vue.set(this.fileList, index, this.fileList[index - 1])
                Vue.set(this.fileList, index - 1, temp)
                this.imgs = JSON.stringify(this.fileList)
            },
            handleright(index) {
                if (index == this.fileList.length - 1) {
                    return
                }
                var temp = this.fileList[index]
                Vue.set(this.fileList, index, this.fileList[index + 1])
                Vue.set(this.fileList, index + 1, temp)
                this.imgs = JSON.stringify(this.fileList)
            },
            uploadSuccess(response) {
                this.fileList.push(response)
                this.imgs = JSON.stringify(this.fileList)
            },
            handlePictureCardPreview(item,index) {
                this.dialogImageUrl = item.imageUrl;
                this.dialogVisible = true;
            },
            getattr: function () {
                var vm = this
                axios.get('/admin/goodsspec/search').then(function (res) {
                    var obj = {
                        value: '',
                        name: '',
                        options: res.data.data,
                        attrValArr: []
                    }
                    vm.attrListArr.push(obj)
                })
            },
            //添加规格列
            getattrval: function (index) {
                var vm = this
                axios.post('/admin/goodsspec/valuelistjson?goodsSpecId=' + vm.attrListArr[index].value, {
                }).then(function (res) {
                    var obj = {
                        value: '',
                        name: '',
                        attrValOptions: res.data.data,
                    }
                    vm.attrvalls = res.data.data;
                    vm.attrListArr[index].attrValArr.push(obj)
                })
            },
            //规格变化
            changeAttr: function (vId, index) {
                this.attrListArr[index].attrValArr = [];
                var arr = []
                var obj = {};
                obj = this.attrListArr[index].options.find((item) => {
                    return item.Name === vId;
                });
                if (obj == undefined) {
                    this.editAttr(this.attrListArr[index].name, index)
                } else {
                    for (let i in this.attrListArr) {
                        if (this.attrListArr[i].value == obj.Id) {
                            this.$message.error('规格不能重复');
                            this.attrListArr[index].name = ''
                            this.attrListArr[index].value = ''
                            this.attrinfochange()
                            return
                        }
                    }
                    this.attrListArr[index].value = obj.Id;
                    this.attrListArr[index].name = vId;
                    Vue.set(this.attrListArr, index, this.attrListArr[index]);
                }
            },
            //规格值变化
            changeValue: function (vId, index, indx) {
                var obj = {};
                obj = this.attrListArr[index].attrValArr[indx].attrValOptions.find((item) => {
                    return item.Name === vId;
                });
                if (obj == undefined) {
                    this.editValue(this.attrListArr[index].value, vId, index, indx)
                } else {
                    this.attrListArr[index].attrValArr[indx].value = obj.Id;
                }
                this.attrinfochange()
            },
            //添加规格行
            addAttr: function () {
                if (this.attrListArr.length <= 2) {
                    this.getattr()
                }
            },
            //添加规格
            editAttr: function (val, index) {
                var vm = this
                var formData = new FormData();
                formData.append('name', val);
                axios.post('/admin/goodsspec/edit', formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }).then(function (res) {
                    if (res.data.success == 1) {
                        vm.attrListArr[index].options.push(res.data.data)
                        vm.attrListArr[index].value = res.data.data.Id;
                        vm.attrListArr[index].name = res.data.data.Name;
                        vm.attrinfochange()
                    }
                })
            },
            //添加规格值
            editValue: function (id, val, index, indx) {
                var vm = this
                var formData = new FormData();
                formData.append('GoodsSpecId', id);
                formData.append('Name', val);
                axios.post('/admin/goodsspec/valueedit', formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }).then(function (res) {
                    if (res.data.success == 1) {
                        vm.attrvalls.push(res.data.data);
                        vm.attrListArr[index].attrValArr[indx].value = res.data.data.Id;
                        vm.attrListArr[index].attrValArr[indx].name = res.data.data.Name;
                        vm.attrinfochange()
                    }
                })
            },
            attrValsChange: function (index) {

            },
            closeAttr: function (index) {
                this.attrListArr.splice(index, 1)
                this.attrinfochange()
            },
            closeValue: function (index, indx) {
                this.attrListArr[index].attrValArr.splice(indx, 1)
                this.attrinfochange()
            },
            attrinfochange: function () {
                var arr = this.attrListArr
                var sarr = [[]];
                var newarr = [];
                var obj = {}
                for (var i = 0; i < arr.length; i++) {
                    var tarr = [];
                    for (var j = 0; j < sarr.length; j++) {
                        for (var k = 0; k < arr[i].attrValArr.length; k++) {
                            obj = {
                                value: arr[i].attrValArr[k].value,
                                name: arr[i].attrValArr[k].name,
                            }
                            var lsarr = []
                            lsarr.push(obj)
                            tarr.push(sarr[j].concat(lsarr));
                        }
                    }
                    sarr = tarr;
                }
                var objs = {}
                for (var z = 0; z < sarr.length; z++) {
                    objs = {
                        arrs: sarr[z],
                        info: {
                            price: '',
                            sku: '',
                            qty: ''
                        }
                    }
                    newarr.push(objs)
                }
                this.attrInfo = newarr
                this.submitattrlist()
                this.attrinfoinputchange()
            },
            //添加参数
            editgoodsparameter: function (val, index) {
                var vm = this
                var formData = new FormData();
                formData.append('name', val);
                axios.post('/admin/goodsparameter/edit', formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }).then(res => {
                    vm.attrbutelist[index].id = res.data.data.Id
                    if (vm.attrbutelist[index].options == undefined) {
                        vm.attrbutelist[index].options = [];
                    }
                    vm.attrbutelist[index].options.push(res.data.data)
                    vm.submitcanshu()
                })
            },
            //添加参数值
            optioneditgoodsparameter: function (val, index, id) {
                var vm = this
                var formData = new FormData();
                formData.append('name', val);
                formData.append('goodsParameterId', id);
                axios.post('/admin/goodsparameter/optionedit', formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }).then(res => {
                    vm.attrbutelist[index].valid = res.data.data.Id;
                    if (vm.attrbutelist[index].optionsVal == undefined) {
                        vm.attrbutelist[index].optionsVal = [];
                    }
                    vm.attrbutelist[index].optionsVal.push(res.data.data)
                    vm.submitcanshu()
                })
            },
            optionlistgoodsparameter: function (id, index) {
                var vm = this
                axios.post('/admin/goodsparameter/optionlist?goodsParameterId=' + id).then(res => {
                    vm.attrbutelist[index].optionsVal = res.data.data
                })
            },
            addCans: function () {
                var vm = this
                var obj = {}
                axios.get('/admin/goodsparameter/search').then(res => {
                    obj = {
                        id: '',
                        name: '',
                        valid: '',
                        valname: '',
                        options: res.data.data,
                        optionsVal: []
                    }
                    vm.attrbutelist.push(obj)
                })
            },
            //参数名变化
            changeattrbute: function (vId, index) {
                this.attrbutelist[index].valname = '';
                this.attrbutelist[index].optionsVal = [];
                var obj = {};
                obj = this.attrbutelist[index].options.find((item) => {
                    return item.Name === vId;
                });
                if (obj == undefined) {
                    this.editgoodsparameter(vId, index)
                } else {
                    this.attrbutelist[index].id = obj.Id
                    this.optionlistgoodsparameter(obj.Id, index)
                }
                this.submitcanshu()
            },
            //参数值变化
            changeattrbuteval: function (vId, index) {
                var obj = {};
                obj = this.attrbutelist[index].optionsVal.find((item) => {
                    return item.Name === vId;
                });
                if (obj == undefined) {
                    this.optioneditgoodsparameter(vId, index, this.attrbutelist[index].id)
                } else {
                    this.attrbutelist[index].valid = obj.Id
                }
                this.submitcanshu()
            },
            removeattrbutelist: function (index) {
                this.attrbutelist.splice(index, 1)
                this.submitcanshu()
            },
            tableRemove: function (index) {
                this.attrInfo.splice(index, 1);
                this.attrinfoinputchange()
            },
            submitattrlist: function () {
                this.attr = JSON.parse(JSON.stringify(this.attrListArr))
                for (let item in this.attr) {
                    delete this.attr[item]["options"]
                    for (j in this.attr[item].attrValArr) {
                        delete this.attr[item].attrValArr[j]["attrValOptions"]
                    }
                }
                this.attr = (JSON.stringify(this.attr))
            },
            submitcanshu: function () {
                this.canshu = JSON.parse(JSON.stringify(this.attrbutelist))
                for (let item in this.canshu) {
                    delete this.canshu[item]["options"]
                    delete this.canshu[item]["optionsVal"]
                }
                this.canshu = (JSON.stringify(this.canshu))
            },
            attrinfoinputchange: function () {
                this.attrtable = JSON.stringify(this.attrInfo)
            }
        },
        mounted() {
            if (this.imgs != '') {
                this.fileList = JSON.parse(this.imgs)
            }
            if (this.canshu != '') {
                this.attrbutelist = JSON.parse(this.canshu)
            }
            if (this.attr != '') {
                this.attrListArr = JSON.parse(this.attr)
            }
            if (this.attrtable != '') {
                this.attrInfo = JSON.parse(this.attrtable)
            }
        }
    })
</script>





